<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 50px auto;
        }
    </style>
</head>
<body>

    <script>
        let balance = +prompt ('请输入银行卡余额')
        let water = +prompt ('请输入12月水费')
        let energy = +prompt ('请输入12月电费')
        let network = +prompt ('请输入12月网费')

        document.write (`
        <table border="1" cellspacing="0" cellpadding="20">
            <caption><h1>2020年12月消费支出</h1></caption>
            <tr>
                <th>银行卡余额</th>
                <th>水费</th>
                <th>电费</th>
                <th>王妃</th>
                <th>银行卡余额</th>
            </tr>
            <tr>
                <td>${balance}元</td>
                <td>${water}元</td>
                <td>${energy}元</td>
                <td>${network}元</td>
                <td>${balance-(water+energy+network)}元</td>
                
            </tr>
        </table>
        
        
        
        
        
        `)
    </script>
</body>
</html>